import React, { ReactNode, useState } from 'react'
import styles from './index.module.less'
import MyInfo from '@/comopnents/MyInfo'
import { ReceiptOutline, ReceivePaymentOutline, TruckOutline, ShopbagOutline, MessageOutline, StarOutline, GiftOutline, ContentOutline, EnvironmentOutline, CouponOutline, CheckCircleOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

interface IconAndContent {
  icon: ReactNode,
  content: string,
  type?: number
}


export default function My() {

  const navigate = useNavigate()

  // 我的订单
  const orderContentInfo = [
    {
      icon: <ReceiptOutline />,
      content: '待付款',
      type: 0
    },
    {
      icon: <ReceivePaymentOutline />,
      content: '已付款',
      type: 1
    },
    {
      icon: <TruckOutline />,
      content: '已发货',
      type: 2
    },
    {
      icon: <ShopbagOutline />,
      content: '已收货',
      type: 3
    },
    {
      icon: <MessageOutline />,
      content: '售后',
      type: 4
    },
  ]

  // 我的订单点击事件
  const orderClick = (type?: number) => {
    navigate(`/my/order?type=${type}`)

  }

  // 商品收藏
  const shopCollect = [
    {
      icon: <StarOutline />,
      content: '商品收藏',
      type: 0
    },
    {
      icon: <GiftOutline />,
      content: '品牌',
      type: 1
    },
    {
      icon: <ContentOutline />,
      content: '文章收藏',
      type: 2
    },
    {
      icon: <EnvironmentOutline />,
      content: '地址',
      type: 3
    },
    {
      icon: <CouponOutline />,
      content: '卡包',
      type: 4
    },
    {
      icon: <GiftOutline />,
      content: '购物车',
      type: 5
    },
    {
      icon: <MessageOutline />,
      content: '联系客服',
      type: 6
    }
  ]
  const navgite = useNavigate()

  // 我的订单点击事件
  const optionClick = (type?: number) => {
    // adresspage
    switch (type) {
      case 3:
        navgite('/my/adresspage')
        break;
      case 5:
        navgite('/my/car')
        break;
      case 2:
        navgite('/my/artilcolect')
        break;
      case 0:
        navgite('/my/goodscolect')
        break;

      default:

        break;
    }

    if (type === 5) {
      navigate('/my/car')
    }

    console.log('点击跳转到响应的界面,将上面shopCollect 中的type 改为对应的地址，直接跳转到 type 即可')
  }

  return (
    <div className={styles.myBox}>
      <MyInfo></MyInfo>
      <div className={styles.myOrder}>
        <div className={styles.title}>我的订单</div>
        <div className={styles.content}>
          <div className={styles.contentList}>
            {
              orderContentInfo.map((item: IconAndContent) => (
                <div key={item.type} className={styles.contentImtes} onClick={() => orderClick(item.type)}>
                  <div className={styles.icons}>{item.icon}</div>
                  <div>{item.content}</div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
      <div className={styles.otherOption}>
        <div className={styles.contentList}>
          {
            shopCollect.map((item: IconAndContent) => (
              <div key={item.content} className={styles.optionsContentItems} onClick={() => optionClick(item.type)}>
                <div className={styles.icons}>{item.icon}</div>
                <div>{item.content}</div>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  )
}
